<template>
  <div>
    
    <el-card>
      <div slot="header">
        <el-page-header content="楼盘管理">
          <template slot="content">
            <div class="page-header">
              <span>楼盘管理</span>
              <el-input v-model="searchContent" placeholder=""></el-input>
            </div>
          </template>
        </el-page-header>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          @row-dblclick="show_detail"
        >
          <el-table-column
            prop="id"
            label="编号"
            width="width"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="developers"
            label="开发商"
            min-width="200"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="propertyname"
            label="小区"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="opening_quotation_date"
            label="开盘日期"
            min-width="200"
            width="width"
          >
          </el-table-column>

          <el-table-column
            header-align="center"
            align="center"
            min-width="200"
            prop="halt_sales_data"
            label="资质材料"
          >
            <template scope-slot="scope">
              <div>
                <el-button type="text" @click="licence_visible = true"
                  >查看</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="150"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
          
              <template v-if="scope.row.state=='申请中'">
                <el-button type="primary" size="small">同意</el-button>
                 <el-button type="info" size="small" @click="reject(scope.row.id)">拒绝</el-button>
              </template>
              <template v-else>
                  <el-tag :type="get_tag_style(scope.row.state)">{{
                scope.row.state
              }}</el-tag>
              </template>
            
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      width="width"
      :before-close="dialogBeforeClose"
    >
      <div class="deep-out2">
        <el-descriptions title="基本信息" :column="1">
          <el-descriptions-item label="房产编号">{{
            currentItem.id
          }}</el-descriptions-item>
          <el-descriptions-item label="开发方">{{
            currentItem.developers
          }}</el-descriptions-item>
          <el-descriptions-item label="房产名称">{{
            currentItem.propertyname
          }}</el-descriptions-item>
          <el-descriptions-item label="房产地址">{{
            currentItem.address
          }}</el-descriptions-item>
          <el-descriptions-item label="房产状态">{{
            currentItem.state
          }}</el-descriptions-item>
          <el-descriptions-item label="开盘日期">{{
            currentItem.opening_quotation_date
          }}</el-descriptions-item>
          <el-descriptions-item label="售罄日期">{{
            currentItem.halt_sales_date
          }}</el-descriptions-item>
          <el-descriptions-item label="住户数量">{{
            currentItem.room_count
          }}</el-descriptions-item>
          <el-descriptions-item label="车位数量">{{
            currentItem.park_count
          }}</el-descriptions-item>
        </el-descriptions>
       
        <el-descriptions title="销售数据" :column="1">
          <el-descriptions-item label="已售出车位"
            >{{ currentItem.saled_count }}<span>个</span></el-descriptions-item
          >
          <el-descriptions-item label="代售出车位">{{
            currentItem.unsaled_count
          }}</el-descriptions-item>
          <el-descriptions-item label="售价均值">{{
            currentItem.average_price
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="licence_visible"
      width="width"
      :append-to-body="true"
      :before-close="dialogBeforeClose"
    >
      <div class="deep-out">
        <el-descriptions title="五证材料" :column="1">
          <el-descriptions-item label="国有土地使用证">
            <el-image
              style="width: 100px; height: 100px"
              :src="licence_image[0]"
              :fit="fit"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item label="建设用地规划许可证">
            <el-image
              style="width: 100px; height: 100px"
              :src="licence_image[1]"
              :fit="fit"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item label="建设工程规划许可证">
            <el-image
              style="width: 100px; height: 100px"
              :src="licence_image[2]"
              :fit="fit"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item label="建筑工程施工许可证">
            <el-image
              style="width: 100px; height: 100px"
              :src="licence_image[3]"
              :fit="fit"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item label="商品房预售许可证">
            <el-image
              style="width: 100px; height: 100px"
              :src="licence_image[4]"
              :fit="fit"
            ></el-image>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="">
          <el-image
            style="width: 100px; height: 100px"
            :src="licence_image[2]"
            :fit="fit"
          ></el-image>
        </el-descriptions>
      </div>
      <div slot="footer">
        <el-button @click="licence_visible = false">取 消</el-button>
        <el-button type="primary" @click="licence_visible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    get_tag_style(tag) {
      switch (tag) {
        case "在售中":
          return "success";
        case "已停售":
          return "info";
        case "未开盘":
          return "";
      }
    },
    show_detail(row, column, event) {
      this.currentItem = row;
      this.dialogVisible = true;
    },
    reject(id){
      alert("您确定要删除编号为"+id+"楼盘吗？")
     this.tableData.splice(this.tableData.findIndex(item=>item.id==id),1)
    }
  },
  computed: {
    final_tableData() {
      let res = [];
      for (let i of this.tableData) {
        let obj = JSON.parse(JSON.stringify(i));
        obj.opening_quotation_date = new Date(
          Number(obj.opening_quotation_date) * 1000
        ).toLocaleString();
        obj.halt_sales_data =
          obj.halt_sales_data === "---"
            ? "---"
            : new Date(Number(obj.halt_sales_data) * 1000).toLocaleString();
        res.push(obj);
      }
      return res.filter(
        (x) =>
          this.searchContent == "" ||
          x.developers.startsWith(this.searchContent) ||
          String(x.id).startsWith(this.searchContent)
      );
    },
  },
  data() {
    return {
      licence_image: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.11315.com%2FqualificationMark%2F2018%2F08%2F23%2Fqa5ob.jpg_mark&refer=http%3A%2F%2Fimg.11315.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635228923&t=b053422154ccc41bea88d19c9d414be3",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.11315.com%2FqualificationMark%2F2018%2F08%2F23%2Fqa5ob.jpg_mark&refer=http%3A%2F%2Fimg.11315.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635228923&t=b053422154ccc41bea88d19c9d414be3",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.11315.com%2FqualificationMark%2F2018%2F08%2F23%2Fqa5ob.jpg_mark&refer=http%3A%2F%2Fimg.11315.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635228923&t=b053422154ccc41bea88d19c9d414be3",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.11315.com%2FqualificationMark%2F2018%2F08%2F23%2Fqa5ob.jpg_mark&refer=http%3A%2F%2Fimg.11315.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635228923&t=b053422154ccc41bea88d19c9d414be3",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.11315.com%2FqualificationMark%2F2018%2F08%2F23%2Fqa5ob.jpg_mark&refer=http%3A%2F%2Fimg.11315.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635228923&t=b053422154ccc41bea88d19c9d414be3",
      ],
      licence_visible: false,
      dialogVisible: false,
      currentItem: {},
      searchContent: "",
      states: ["在售中", "已停售", "未开盘"],
      tableData: [
        {
          id: "0001",
          developers: "浙江钱氏房地产开发有限公司",
          opening_quotation_date: "2020/12/01 9:00",
          address: "浙江省杭州市西湖区龙井路1号",
          propertyname: "天晨小区",
          halt_sales_data: "2023/12/01 9:00",
          state: "在售中",
          average_price: 90500,
          saled_count: 720,
          unsaled_count: 670,
          room_count: 2010,
          park_count: 1400,
        },
        {
          id: "0002",
          developers: "杭州张氏房地产开发有限公司",
          opening_quotation_date: "2018/06/01 9:00",
          address: "浙江省杭州市钱江区一号大街169号",
          propertyname: "超超公馆",
          halt_sales_data: "2019/06/01 9:00",
          state: "已停售",
          average_price: 20500,
          saled_count: 1206,
          unsaled_count: 263,
          room_count: 1974,
          park_count: 1470,
        },
         {
          id: "0003",
          developers: "超晟置业房地产开发有限公司",
          opening_quotation_date: "2022/06/01 9:00",
          address: "浙江省台州明忠区上方路1号",
          propertyname: "晨晨公馆",
          halt_sales_data: "2023/06/01 9:00",
          state: "申请中",
          average_price: 90500,
          saled_count: 720,
          unsaled_count: 670,
          room_count: 2010,
          park_count: 1400,
        },
      ],
    };
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 2rem;
}

.table-header {
  display: flex;
  align-items: center;
}

.page-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-header .el-input {
  width: 300px;
}

.el-page-header >>> .el-page-header__content {
  flex-grow: 1;
}
.el-page-header >>> .el-page-header__left {
  align-items: center;
}
.deep-out >>> .el-descriptions__title{
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 2rem;
}
.deep-out >>> .el-descriptions-item__container,.deep-out2 >>> .el-descriptions-item__container{
  display: flex;
}

.deep-out >>>.el-descriptions-item__label{
  width: 10rem;
}

.deep-out2 >>>.el-descriptions-item__label{
  width: 5rem;
}
.deep-out2 >>> .el-descriptions__title{
  text-align: left;
  font-size: 1.25em;
  font-weight: bold;
  margin: 1rem;
}
</style>